<template>
  <div id="app">
    <!-- <HelloWorld /> -->
    <!-- <Document /> -->
    <!-- <Cart /> -->
    <div class="head">
      <h1>鞋子卖场</h1>
      <div class="btn">
        <ul>
          <li v-for="item in tablist" :key="item.id" :class="[item.type === type ? 'on' : '']"
            @click="changFoot(item.type)">{{ item.tab }}</li>
        </ul>
      </div>
    </div>
    <Footwear :List="type === 0 ? listall : list"></Footwear>





    <!-- 测试通信方式代码 -->
    <!-- <div>{{ msg }}</div>
    <p>父级组建的属性值：{{ cont }}</p>
    <button @click="changeCont">按钮</button>
    <First :cont="cont" @changeC="changeCt"></First> -->
  </div>
</template>

<script>
import Footwear from "./components/Footwear.vue"


//测试通信方式代码
// import First from "./components/first-page.vue"

export default {
  name: 'app',
  components: {
    // HelloWorld,
    // Document,
    // Cart,
    Footwear,

    //测试通信方式代码
    // First: First,
  },
  data() {
    return {
      type: 0,
      tablist: [
        {
          id: 1,
          tab: "全部商品",
          type: 0,
        },
        {
          id: 2,
          tab: "男鞋",
          type: 1,
        }, {
          id: 3,
          tab: "女鞋",
          type: 2,
        },
      ],
      list: [],
      listall: [
        {
          id: 1,
          type: 1,
          img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i1/106798869/O1CN01fjhgx32FO3Pf7PllF_!!0-saturn_solar.jpg',
          content: '欧洲站潮牌男鞋百搭新款',
          price: '278',
        },
        {
          id: 2,
          type: 1,
          img: 'https://img.alicdn.com/imgextra/i3/725951136/TB2I9TomQ7mBKNjSZFyXXbydFXa_!!725951136.jpg',
          content: '回力男鞋帆布鞋低帮网球',
          price: '79',
        }, {
          id: 3,
          type: 1,
          img: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i3/92688455/O1CN012kTige2CKRUgvB3zk_!!92688455.jpg',
          content: '李宁跑步鞋男网面透气男',
          price: '278',
        }, {
          id: 4,
          type: 2,
          img: 'https://gd2.alicdn.com/imgextra/i2/0/O1CN016l0koq1INXhYcmHWe_!!0-item_pic.jpg',
          content: '【王小毒】星河灿烂●芭',
          price: '289',
        }, {
          id: 5,
          type: 2,
          img: 'https://gd2.alicdn.com/imgextra/i3/1900994914/O1CN01vAp9Rm1mAesfPFQ4o_!!1900994914-0-lubanu-s.jpg',
          content: '尖头高跟鞋女细跟2022年',
          price: '148',
        }, {
          id: 6,
          type: 2,
          img: 'https://gd4.alicdn.com/imgextra/i2/1658155406/O1CN01EmNOhC1pnzmg6lwqm_!!1658155406.jpg',
          content: '漆皮黑色高跟鞋时尚浅口',
          price: '179',
        },
      ],




      // msg: "父级组建",
      // cont: "奔驰"
    }
  },
  methods: {
    // changeCont(){
    //   this.cont = "宝马"
    // },
    // changeCt(val){
    //   console.log(val);
    // }


    changFoot(val) {
      // console.log(this);
      this.type = val
      if (val === 0) {
        this.list = this.listall
        return
      }
      this.list = this.listall.filter(item => item.type === val)
    },
    modifyP(price, id) {
      this.listall[id - 1].price = price
    }
  },
  provide() {
    return {
      modifyP: this.modifyP
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px;
  height: 200px;
  border: 10px solid #48739d; */
}

.head {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}

.head h1 {
  color: #b6b8ba;
}

.btn ul {
  display: flex;
}

li {
  font-size: 16px;
  margin: 10px;
}

li:hover,
li.on {
  color: red;
}
</style>
